<template>
  <!-- 进度管理 -->
  <div class="body scheduleManage">
    <div class="titleBox">
      <img src="../../assets/scheduleManage.png" alt="" class="titlebg" />
      <p class="title">进度管理</p>
    </div>
    <div class="main">
      <div class="buttonBox">
        <div
          v-for="(item, index) in buttonBox"
          :key="index"
          @click="proFun(index)"
          :class="buttonBoxIndex == index ? 'active' : ''"
        >
          {{ item }}
        </div>
      </div>
      <div class="scheduleBox">
        <img
          src="@/assets/schedule_left.png"
          alt=""
          class="schedule_left"
          @click="scheduleFun(+240)"
          v-if="scheduleList.length > 4"
        />
        <div class="hrBox" :style="{ transform: `translateX(${hrBoxLeft}px)` }">
          <div
            class="hr"
            :style="{
              width:
                scheduleList.length > 4
                  ? `${scheduleList.length * 240}px`
                  : '960px',
            }"
          ></div>
          <div
            class="schedules"
            :style="{
              width:
                scheduleList.length > 4
                  ? `${scheduleList.length * 240}px`
                  : '960px',
            }"
          >
            <div
              v-for="(item, index) in scheduleList"
              :key="index"
              class="schedule"
              :style="{
                width:
                  scheduleList.length > 4
                    ? `240px`
                    : `${960 / scheduleList.length}px`,
              }"
            >
              <div class="schedule_title">{{ item.planName }}</div>
              <img
                :src="
                  item.actualEndTime
                    ? require('@/assets/completed.png')
                    : require('@/assets/undone.png')
                "
                alt=""
                class="schedule_img"
              />
              <!-- <p class="schedule_p">
                {{ index == 0 ? "实际开始时间" : "预计开始时间"
                }}{{ item.estimateStartTime }}
              </p> -->
              <p class="schedule_p" v-if="item.actualEndTime">
                预计结束时间
                {{ item.estimateEndTime }}
              </p>
              <p class="schedule_p">
                {{ item.actualEndTime ? "实际结束时间" : "预计结束时间" }}
                {{
                  item.actualEndTime ? item.actualEndTime : item.estimateEndTime
                }}
              </p>
              <p class="schedule_p color00" v-if="!item.actualEndTime">
                $nbsp;
              </p>
            </div>
          </div>
        </div>
        <img
          src="@/assets/schedule_right.png"
          alt=""
          class="schedule_right"
          @click="scheduleFun(-240)"
          v-if="scheduleList.length > 4"
        />
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/util/api";
import * as dayjs from "dayjs";
export default {
  name: "scheduleManage",
  data() {
    return {
      msg: "scheduleManage",
      buttonBox: ["里程碑", "二级", "月", "周"],
      buttonBoxIndex: 0,
      hrBoxLeft: 0,
    };
  },
  computed: {
    scheduleList: function () {
      return this.$store.state.scheduleList;
    },
  },
  mounted() {
    // this.progressIndexShow();
    this.secondShow();
  },
  methods: {
    proFun(index) {
      let that = this;
      that.buttonBoxIndex = index;
      console.log(index);
      if (this.buttonBoxIndex > 0) {
        this.secondShow(() => {
          that.$store.dispatch("changeFun", {
            str: "scheduleShow",
            cont: true,
          });
          that.$store.dispatch("changeFun", {
            str: "scheduleIndex",
            cont: this.buttonBoxIndex,
          });
        });
      }
    },
    // 进度位移
    scheduleFun(num) {
      let length = this.scheduleList.length - 4;
      let translate = this.hrBoxLeft + +num;
      if (translate <= 0 && translate >= -(length * 240)) {
        this.hrBoxLeft += +num;
      }
    },

    /** API */
    // 大屏二级界面展示数据：根据不同选项展示不同信息
    secondShow(callback) {
      api.secondShow(
        {
          month: this.buttonBoxIndex == 2 ? dayjs().format("YYYY-MM") : null,
          nodeType: 2,
          planLeave: this.buttonBoxIndex > 1 ? this.buttonBoxIndex - 1 : null,
          planType:
            this.buttonBoxIndex == 0 || this.buttonBoxIndex == 1
              ? 0
              : this.buttonBoxIndex - 1,
          startDate:
            this.buttonBoxIndex == 3 ? dayjs().format("YYYY-MM-DD") : null,
        },
        (res) => {
          res.data.data.plans.map((item) => {
            item.estimateStartTime = dayjs(item.estimateStartTime).format(
              "YYYY-MM-DD"
            );
            item.actualEndTime = item.actualEndTime
              ? dayjs(item.actualEndTime).format("YYYY-MM-DD")
              : "";
            item.estimateEndTime = item.estimateEndTime
              ? dayjs(item.estimateEndTime).format("YYYY-MM-DD")
              : "";
          });
          this.$store.dispatch("changeFun", {
            str: "scheduleList",
            cont: res.data.data.plans,
          });
          // this.scheduleList = res.data.data.plans;
          res.data.data.progresses.map((item) => {
            item.startTime = item.startTime
              ? dayjs(item.startTime).format("YYYY-MM-DD")
              : "";
            item.endTime = item.endTime
              ? dayjs(item.endTime).format("YYYY-MM-DD")
              : "";
          });
          this.$store.dispatch("changeFun", {
            str: "tableData",
            cont: res.data.data.progresses,
          });
          callback && callback();
        }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.scheduleManage {
  width: 100%;
  height: 100%;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
  }
  .main {
    .buttonBox {
      width: 100%;
      height: auto;
      padding: 30px 15px;
      div {
        display: inline-block;
        background: #2095fe;
        border-radius: 4px;
        padding: 5px 20px;
        color: #fff;
        font-size: 16px;
        margin: 0 5px;
      }
      .active {
        background: #ff891d;
      }
    }
    .scheduleBox {
      width: 94%;
      min-height: 150px;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      // padding: 0 20px;
      box-sizing: border-box;
      .schedule_left,
      .schedule_right {
        width: 32px;
        height: 40px;
        cursor: pointer;
        display: none;
      }
      .schedule_left {
        position: absolute;
        left: 16px;
        top: 33px;
        z-index: 2;
      }
      .schedule_right {
        position: absolute;
        right: 16px;
        top: 33px;
        z-index: 2;
      }
      .hrBox {
        width: 1500px;
        height: auto;
        position: relative;
        transition: all 500ms ease;
        .hr {
          position: absolute;
          width: auto;
          height: 8px;
          top: 48px;
          z-index: 1;
          background: linear-gradient(270deg, #eeeeee, #6aa3ff 41%, #96ffcf);
        }
        .schedules {
          width: 100%;
          position: relative;
          z-index: 3;
          .schedule {
            display: inline-block;
            width: 240px;
            height: auto;
            min-height: 160px;
            text-align: center;
            .schedule_title {
              font-size: 18px;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .schedule_img {
              width: 32px;
              height: 32px;
              margin-top: 12px;
              margin-bottom: 12px;
            }
            .color00 {
              height: 20px;
              color: #00000000;
            }
            .schedule_p {
              font-size: 12px;
              font-weight: 400;
            }
          }
        }
      }
    }
    .scheduleBox:hover .schedule_left,
    .scheduleBox:hover .schedule_right {
      display: block;
    }
  }
}
</style>
